<template>
  <div style="    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;">

    <div style="margin-top: 30px;">
      <div class="biaoge">
            <table class="biaotou">
                <tr><td>订单编码</td></tr> 
                <tr><td>客户名称</td></tr>
                <tr><td>收货地址</td></tr>
                <tr><td>产 品 数</td></tr>
                <tr v-for="(item,index) in gridsData" :key="index"><td>{{item.OrderProduct.Name}}</td></tr>

            </table>
            
            <table class="neirong">
                <tr><td>{{netOrderId}}</td></tr>
                <tr><td>{{name}}</td></tr>
                <tr><td>{{recAddress}}</td></tr>
                <tr><td>{{gridsDataLength}}</td></tr>
                <tr v-for="(item,index) in gridsData" :key="index"><td>{{item.OrderProduct.OrderProductCode}}  ——  {{item.OrderProduct.PhotoNum}}</td></tr>
            </table>
      </div>
      <!-- <barcode :options="barcode_option"
            :value="barcodeValue"
            style="position: relative;left:20px;marginTop:20px;"></barcode> -->
       <svg id="barcode"></svg>
    </div>
    <!-- <OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" id="WebBrowser" name="WebBrowser" width="0"></OBJECT> -->
  </div>

</template>

<script>
  import VueBarcode from 'vue-barcode'

  export default {
    name: 'Print2DCode',
    components: {
      barcode: VueBarcode
    },
    data() {
      return {
        // barcode_option: {
        //   displayValue: true,
        //   background: '#fff',
        //   fontSize: '14px'
        // },
        barcodeValue: '',
        netOrderId:'',
        name:'',
        recAddress:'',
        gridsDataLength:'',
        gridsData:''
      }
    },

    created() {
      const { barcodeValue, netOrderId,name,recAddress,gridsDataLength,gridsData} = this.$route.query
      document.title = '产品分拣-小票打印'
      this.barcodeValue = barcodeValue
      this.netOrderId = netOrderId
      this.name = name
      this.recAddress = recAddress
      this.gridsDataLength = gridsDataLength
      this.gridsData = JSON.parse(gridsData)
    },
    methods:{
      barcode() {
        JsBarcode('#barcode',this.barcodeValue,{
          format: 'CODE128',//选择要使用的条形码类型
          text: this.barcodeValue,
          displayValue: true,//是否在条形码下方显示文字
          // textPosition: 'top'//设置文本的垂直位置
          width: 1.4,
          height:80,
          fontSize:'20px',
          marginTop:'30px',
        })
      }
    },
    mounted() {

      this.$nextTick(()=>{
        this.barcode();
          print()
      })
    }

  }
</script>

<style lang="scss" scoped>
body{
  width: 60mm;
  height: 60mm;
  margin: 0 auto;
  .biaoge{
    position: relative;
    left: 5px;
    width: 56mm;
    // height: 30mm;
    margin: 0 auto;
    .biaotou{
      float: left;
      // height: 30mm;
      width: 18mm;
      td{
          border: 2px solid #ccc;
          height: 40px;
          text-align: center;
          font-size: 13px;
      }
    }
    .neirong{
      float: left;
      // height: 30mm;
      width: 35mm;
        td{
          text-align: center;
          height: 40px;
          border: 2px solid #ccc;
          border-left: none;
          font-size: 12px;
      }
    }
  }
  #barcode{
    width:98%;
    position: relative;
    left:5px;
  }
}
</style>
